<script setup>
import {onLoad, onShow} from "@dcloudio/uni-app";
import {ref} from "vue";
import {post} from "@/request/request";

const navbarTitle = ref("");
const cateId = ref("");

const banners = ref({});
const items = ref([]);

onLoad((options) => {
  console.log(options);
  navbarTitle.value = options.text;
  cateId.value = options.id;
});
onShow(() => {
  cateItem();
});
const cateItem = () => {
  post("productList", {category_id: cateId.value}).then((res) => {
    const {data} = res;
    console.log("items", data);
    banners.value = data.banner;
    items.value = data.product;
  });
};
const homeClick = () => {
  uni.navigateBack();
};
const searchClick = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  });
};
const itemClick = (item) => {
  uni.navigateTo({
    url: "/pages/goods/goods?id=" + item.id,
  });
};
//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

</script>
<template>
  <uv-navbar
      :title="navbarTitle"
      :fixed="true"
      :placeholder="true"
      @leftClick="homeClick">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/home.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="cate">
    <view class="top-search" @click="searchClick">
      <image src="/static/home/search.svg"/>
      <text>ئىزدىمەكچى بولغان مەھسۇلات نامىنى كىرگۈزۈڭ</text>
    </view>
    <view class="swiper">
      <uv-swiper
          :list="banners"
          keyName="ca_image"
          height="421rpx"
          :circular="true"/>
    </view>
    <view class="container">
      <view class="column" v-for="(item, index) in items" :key="index">
        <view class="column-item" @click="itemClick(item)">
          <image :src="item.product_image"/>
          <view class="introduce">
            <view style="color: #111111;height: 105rpx">{{ item.product_name }}</view>
            <!--            <view class="des">{{ item.description }}</view>-->
            <view style="color: #010101;height: 30rpx">{{ item.product_price }}￥</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    width: 60rpx;
    height: 60rpx;
  }
}

.cate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  direction: rtl;
  padding: 20rpx;

  .top-search {
    margin: 15rpx;
    width: 690rpx;
    height: 96rpx;
    background: #f4f4f4;
    border-radius: 48rpx;
    display: flex;
    align-items: center;

    image {
      margin: 25rpx;
      width: 38rpx;
      height: 38rpx;
    }

    text {
      font-size: 28rpx;
      color: #999999;
    }
  }

  .swiper {
    width: 690rpx;
    height: 421rpx;
  }

  .container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 30rpx;

    .column {
      flex: 0 0 50%;
      box-sizing: border-box;
      padding: 10rpx;

      .column-item {
        height: 472rpx;
        width: 330rpx;
        background: #f5f5f5;
        border-radius: 20rpx;
        overflow: hidden;
        box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

        image {
          height: 298rpx;
          width: 330rpx;
        }

        .introduce {
          padding: 10rpx;

          //.des {
          //  height: 42rpx;
          //  color: #959090;
          //  font-size: 18rpx;
          //  overflow: hidden;
          //  white-space: nowrap;
          //  text-overflow: ellipsis;
          //}
        }
      }
    }
  }
}
</style>
